<template>
	<view class="page">
		<view class="logo-wrap">
			<image class="logo" src="/static/logo.jpg" mode="aspectFill"></image>
			<view class="slogan">让生活更美好</view>
		</view>

		<view class="fs-full">
			<fui-card>
				<view class="fs-p24 fs-flex fs-justify__center fs-size__36">忘记密码</view>
				<fui-form ref="form" labelAlign="left" labelWidth="200" labelColor="#888">
					<fui-form-item label="账号:" :bottom-border="true" :padding="['16rpx', '30rpx']">
						<fui-input radius="16" :borderBottom="false" v-model:modelValue="formState.phone" type="number"
							placeholder="请输入您的账号" :padding="['16rpx', '16rpx']" maxlength="11"></fui-input>
					</fui-form-item>
					<fui-form-item label="密码:" :bottom-border="true" :padding="['16rpx', '30rpx']">
						<fui-input :borderBottom="false" v-model:modelValue="formState.password" :password="password"
							placeholder="请输入密码" :padding="['16rpx', '16rpx']">
							<fui-icon :name="password ? 'invisible' : 'visible'" color="#B2B2B2" :size="44"
								@click="change"></fui-icon>
						</fui-input>
					</fui-form-item>
					<fui-form-item label="确认密码:" :bottom-border="true" :padding="['16rpx', '30rpx']">
						<fui-input :borderBottom="false" v-model:modelValue="formState.confirm_password"
							:password="confirmPassword" placeholder="确认密码" :padding="['16rpx', '16rpx']">
							<fui-icon :name="confirmPassword ? 'invisible' : 'visible'" color="#B2B2B2" :size="44"
								@click="confirmchange"></fui-icon>
						</fui-input>
					</fui-form-item>
					<fui-form-item label="姓名:" :bottom-border="true" :padding="['16rpx', '30rpx']">
						<fui-input :borderBottom="false" radius="16" v-model:modelValue="formState.name" type="text"
							placeholder="请输入您的姓名" :padding="['16rpx', '16rpx']"></fui-input>
					</fui-form-item>

					<!-- <view class="fs-pt20 fs-pb32"> -->
					<city-picker v-model:city_id="formState.city_id" v-model:department_id="formState.department_id" />
					<!-- </view> -->

					<view
						class="fs-flex fs-justify__between fs-flex__reverse fs-size__30 fs-px30 fs-color__label fs-mt16">
						<navigator url="/pages/login/login">去登录</navigator>
					</view>
					<fui-form-item :bottom-border="false">
						<fui-button :loading="loading" @click="handleRegister" background="#4282FF"
							radius="48rpx">提交</fui-button>
					</fui-form-item>
				</fui-form>
				<view class="fs-p24"></view>
			</fui-card>
		</view>
	</view>

	<view class="footer-fixed">
		<view class="copyright">
			<text @click="contact('18599719996')">新疆幻思信息科技有限公司技术支持</text>
		</view>
		<fui-safe-area background="#f2f2f2"></fui-safe-area>
	</view>

	<fui-dialog :show="visible" title="提示" content="提交成功！" :buttons="buttons" @click="onTap"></fui-dialog>

	<fui-load-ani v-if="loading" type="3" isFixed maskColor="rgba(0,0,0,0.1)"></fui-load-ani>
</template>

<script setup>
	import { ref } from 'vue';
	import { useUserStore } from '../../stores/user';
	import { submitForgetPassword } from '@/common/api/index.js';
	import cityPicker from './city-picker.vue';
	import { onShareAppMessage } from '@dcloudio/uni-app'

	const visible = ref(false);
	const buttons = [{ text: '确定', color: '#FF2B2B' }];
	const onTap = () => {
		uni.navigateBack()
	}

	const loading = ref(false);
	const password = ref(true);
	const confirmPassword = ref(true);
	const formState = ref({
		phone: '',
		password: '',
		confirm_password: '',
		name: '',
		city_id: '',
		department_id: ''
	});

	function change() {
		password.value = !password.value;
	}

	function confirmchange() {
		confirmPassword.value = !confirmPassword.value;
	}

	const form = ref(null);
	const rules = [
		{ name: 'phone', rule: ['required'], msg: ['请输入您的账号'] },
		{ name: 'password', rule: ['required'], msg: ['请输入密码'] },
		{ name: 'confirm_password', rule: ['required', 'isSame:password'], msg: ['请输入确认密码', "两次输入的密码不一致"] },
		{ name: 'name', rule: ['required'], msg: ['请输入姓名'] },
		{ name: 'city_id', rule: ['required'], msg: ['请选择城市/部门'] }
	];
	const { setToken, setUserinfo } = useUserStore();

	async function handleRegister() {
		form.value.validator(formState.value, rules).then(async (res) => {
			if (res.isPassed) {
				loading.value = true;
				const { success, message } = await submitForgetPassword(formState.value).catch(() => {
					loading.value = false;
				});
				if (success) {
					visible.value = true

				}
				loading.value = false;
			}
		});
	}

	onShareAppMessage(() => {
		return {
			title: '捷报Hub'
		}
	})
</script>

<style lang="scss">
	page {
		width: 100%;
		padding-top: 60rpx;
	}

	.logo-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;

		.logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
		}

		.slogan {
			margin-top: 20rpx;
			font-size: 14px;
			color: #666666;
			text-align: center;
		}
	}
</style>